<template>
  <div class="tools-tabs-wrap">
    <div class="tools-tabs">
      <div
        v-for="(item, index) in toolList"
        :key="index"
        class="tools-item"
        :class="{ active: currentPath === item.path }"
        :style="{ width: 100 / toolList.length + '%' }"
        @click="handleChangeTools(item)"
      >
        <img class="icon-img" :src="item.icon" />
        <div class="tools-title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCurrentPage } from '@/utils/index.js';

  export default {
    data() {
      return {
        currentPath: '',
        toolList: [
          { title: '文案提取', icon: 'https://image.doulaoban.com/applet/image/1710732484471_新建消息.png', path: '/pages/index/main' },
          {
            title: 'AI仿写',
            icon: 'https://image.doulaoban.com/applet/image/1710732494489_vr-headset.png',
            path: '/subpackages/packageForWorkBox/aiwrite-up/main',
          },
          {
            title: '违禁词检测',
            icon: 'https://image.doulaoban.com/applet/image/1710732484470_考证.png',
            path: '/subpackages/packageForWorkBox/words-check/main',
          },
          {
            title: '去水印',
            icon: 'https://image.doulaoban.com/applet/image/1710732484471_Frame 1321319405.png',
            path: '/subpackages/packageForWorkBox/watermark/watermark',
          },
        ],
      };
    },
    computed: {},
    created() {
      this.currentPath = `/${getCurrentPage().route}`;
      this.toolList.find((item) => item.path === this.currentPath);
    },
    methods: {
      handleChangeTools(item) {
        if (this.currentPath === item.path) {
          return false;
        }
        if (!item.path) {
          uni.showToast({
            title: '即将开放，敬请期待！',
            icon: 'none',
          });
        } else {
          uni.redirectTo({ url: item.path });
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .tools-tabs-wrap {
    padding: 12px 12px 4px;

    .tools-tabs {
      display: flex;
      justify-content: space-between;
      padding: 8px;
      background: #fff;
      border-radius: 8px;

      .tools-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        padding: 8px 0;
        border: 1px solid transparent;

        .icon-img {
          width: 30px;
          height: 30px;
        }

        .tools-title {
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 22px; /* 157.143% */
          color: var(--text-1-color);
        }

        &.active {
          background: linear-gradient(103deg, rgba(240, 255, 220, 60%) 0%, rgba(220, 255, 241, 0.6) 55.76%, rgba(255, 216, 239, 60%) 98.69%), #fff;
          border: 1px solid #7faaff;
          border-radius: 8px;

          .tools-title {
            color: var(--mian-color);
          }
        }
      }
    }
  }
</style>
